<template>
    <div class="red-doc-panel">
        <div id="red-doc" class="red-doc-page container" style="font-family: fs;">
            <span id="num-notes" class="badge bg-aqua no-print" style="float:right"></span>
            <h1 class="docHd"><p>湘潭大学文件批办单</p></h1>
                <div class="docBox">
                    <div class="docConTr flexbox" style="height: 60px">
                        <div class="wp25 flexbox b-right">
                            <div class="docTit1 w60"><span>收文方式</span>
                            </div>
                            <div class="docTxt1 t-center">OA</div>
                        </div>
                        <div class="wp25 flexbox b-right">
                            <div class="docTit2 w60"><span>收文时间</span></div>
                            <div class="docTxt1 docVal">{{info.collect_date}}</div>
                        </div>
                        <div class="wp25 flexbox b-right">
                            <div class="docTit1 w60"><span>原文编号</span>
                            </div>
                            <div class="docTxt1 t-center docVal">{{info.collect_txt}}</div>
                        </div>
                        <div class="wp25 flexbox b-right">
                            <div class="docTit2 w60"><span>收文编号</span></div>
                            <div class="docTxt1 docVal">{{info.bh}}</div>
                        </div>
                    </div>
                    <div class="docConTr flexbox">
                        <div class="docTit1 w60"><span>来文机关</span></div>
                        <div class="docTxt1 docVal">{{info.sender}}</div>
                    </div>
                    <div class="docConTr flexbox">
                        <div class="docTit1 w60"><span>来文标题</span></div>
                        <div class="docTxt1 docVal">{{info.title}}</div>
                    </div>
                    <div class="docConTr flexbox">
                        <div class="docTit1 w60"><span>批办意见</span></div>
                        <div class="docTxt1">
                            <div class="docDate docVal">
                                <ul>
                                    <li v-for="(item,index) in info.sug1" :key="index"><div>{{item.msg}}</div><div>{{item.alias}} ({{item.time}})</div></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="docConTr flexbox" style="height: 300px">
                        <div class="docTit1 w60"><span>领导指示</span></div>
                        <div class="docTxt1">
                            <div class="docDate docVal">
                                <ul>
                                    <li v-for="(item,index) in info.sug4" :key="index"><div>{{item.msg}}</div><div>{{item.alias}} ({{item.time}})</div></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="docConTr flexbox" style="height: 300px">
                        <div class="docTit1 w60"><span>阅文人签字</span></div>
                        <div class="docTxt1">
                            <div class="docDate docVal">
                                <ul>
                                    <li v-for="(item,index) in info.sug3" :key="index"><div>{{item.msg}}</div><div>{{item.alias}} ({{item.time}})</div></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="docConTr flexbox">
                        <div class="docTit1 w60"><span>阅办结果</span></div>
                        <div class="docTxt1">
                            <div class="docDate docVal">
                            </div>
                        </div>
                    </div>
                </div>
            <div id="mask-image"></div>
        </div>
    </div>
</template>
<script>
    import schoolSignature from "@/api/officialDocument/schoolSignature/index"
    export default {
        name: "MyHtmlDocument",
        props:["row"],
        data(){
          return {
              info:{}
          }
        },
        computed:{
          isXwlw(){
            return this.row.type_id == 2
          }
        },
        created() {
            this.getDocumentSpd()
        },
        methods:{
            getDocumentSpd(){
                schoolSignature.getDocumentSpd(this.row.id,{type_id:this.row.type_id,d:"json"}).then(res=>{
                    this.info = res.data
                })
            }
        }
    }
</script>
<style lang="scss" scoped>
    .red-doc-panel {
        color: #000000;
        line-height: 1.42;
        position: relative;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        border: solid 1px lightgrey;
        border-radius: 2px;
        box-shadow: 2px 2px 5px #d3d6da;

        .red-doc-page {
            font-size: 16px;
            margin-left: auto;
            margin-right: auto;
            width: 248mm;
            padding-left: 12pt;
            padding-right: 12pt;
            padding-top: 12pt;
            padding-bottom: 12pt;
            background-color: white;

            h1.docHd {
                width: 100%;
                font-size: 2.5em;
                margin-top: 20px;
                margin-bottom: 40px;
                position: relative;
                padding-bottom: 5px;
                p{
                    text-align: justify;
                    text-align-last: justify;
                    color:#C00101;
                    font-family: FZXiaoBiaoSong-B05S;
                }
                &::before{
                    position: absolute;
                    bottom: 3px;
                    left: 0;
                    right: 0;
                    content: '';
                    display: block;
                    height: 3px;
                    background-color: #C00101;
                }
                &::after{
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    content: '';
                    display: block;
                    height: 1px;
                    background-color: #C00101;
                }
            }

            .docBox{
                border: 1px solid #D04040;
                border-bottom: 0 none;
                line-height: 30pt;
                font-family: 宋体;
                color: #C00000;
                .b-right{
                    border-right: 1px solid #D04040;
                }
                .wp50{
                    width: 50%;
                }
                .wp70{
                    width: 70%;
                }
                .wp30{
                    width: 30%;
                }
                .wp25{
                    width: 25%;
                }
                .wp60{
                    width: 60%;
                }
                .wp40{
                    width: 40%;
                }
                .w80{
                    padding: 0px 20px;
                    span{
                        display: block;
                        width:72px;
                        text-align-last: justify;
                    }
                }
                .w60{
                      padding: 0px 20px;
                      span{
                          display: block;
                          width:45px;
                          line-height: 20px;
                      }
                  }
                .t-center{
                    text-align: center;
                }
                .t-right{
                    text-align: right;
                }
                .docConTr{
                    border-bottom: 1px solid #D04040;
                }
                .flexbox{
                    display: flex;
                }
                .docTit1{
                    border-right: 1px solid #D04040;
                    width: 80px;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    padding: 20px 10px; text-align: center;
                }

                .docTit2,.docTit3{
                    border-right: 1px solid #D04040;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                }
                .docTxt1,.docTxt2,.docTxt3{
                    flex: 1;
                    padding: 0 20px;
                    display: inline-flex;
                    align-items: center;
                }
                .docVal{
                    color: #333333;
                }
                .docDate{
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    >div{
                        flex:1;
                        min-height: 40px;
                    }
                    >p{
                        display: block;
                        text-align: right;
                    }
                }
            }


        }
    }
</style>
